<template>



  <div>
    进入学习
    <div class="course_content">
      <div class="wrapper_containers_left">
        <Row>
          <Col span="24" >
          <div class="courseDetails_content_title">
            救援及自救知识考核
          </div>

          </Col>
        </Row>
        <Row type="flex" justify="end" class="code-row-bg" style="width:100%;margin-left:4%;">
          <Col span="4" class="trainning_info">管理员：admin</Col>
          <Col span="4" class="trainning_info">时长：90分钟</Col>
          <Col span="4" class="trainning_info">所属机构：总公司</Col>
          <Col span="12"> <span class="trainning_info">有效时间：2017-06-23 11:37:36<span class="time_to">至</span> 2017-02-23 11:37:38</span></Col>
        </Row>
        <br>
        <br>
        <div class="progessOfTheCircle">
          <Row type="flex" justify="end" class="code-row-bg">
            <Col span="4" class="announcement_title">
            <span class="announcement">0个公告</span>
            <img class="courseDetails_message" src="../../../../../assets/images/indexImg/courseDetails_message.png">

            <span class="courseDetails_notice">通知</span>
            </Col>
            <Col span="4" class="learntingTaskNum_title">
            <span class="learntingTaskNum">2个学习任务</span>
            <img class="courseDetails_book" src="../../../../../assets/images/indexImg/courseDetails_book.png">
            <span class="remainingNumber_learning">剩余2个</span>
            <span class="courseDetails_learningTask">学习任务</span>
            </Col>
            <Col span="4" class="testTaskNum_title">
            <span class="testTaskNum">0个测试任务</span>
            <img class="courseDetails_test" src="../../../../../assets/images/indexImg/courseDetails_test.png">
            <span class="remainingNumber_testTaskNum">剩余0个</span>
            <span class="courseDetails_practiceTest">测试练习</span>
            </Col>
            <Col span="4" class="certificateNum_title">
            <span class="certificateNum">2个结业考试</span>
            <img class="courseDetails_exam" src="../../../../../assets/images/indexImg/courseDetails_exam.png">
            <span class="remainingNumber_certificateNum">剩余2个</span>
            <span class="courseDetails_certificate">结业考试</span>
            </Col>
            <Col span="4" class="certificateNum">
              <i-circle :percent="80" style="width:40%;height: auto;">
                <span class="demo-Circle-inner" style="font-size:24px">80%</span>
              </i-circle>
              <span class="courseDetails_learningProcess">学习进度</span>
            </Col>
          </Row>





        </div>


        <Tabs type="card">
          <TabPane label="学习内容">

          <Button class="ivu-btn ivu-btn-ghost" @click="startLearning">开始学习</Button>
          </TabPane>
          <TabPane label="测验练习">
            <Button class="ivu-btn ivu-btn-ghost" @click="startPracticing">开始练习</Button>
          </TabPane>
          <TabPane label="结业考核">
            <Button class="ivu-btn ivu-btn-ghost" @click="startTesting">开始考核</Button>
          </TabPane>
        </Tabs>
      </div>

      <!--右侧同班同学-->
      <div class="wrapper_containers_right">
        <p class="classmateBox">同班同学</p>
        <div class="courseDetails_line1"></div>
        <ul class="headPortraitBox">
          <li class="headPortrait">
            <div class="headIcon">
              <img src="../../../../../assets/images/indexImg/head_default.png" />
            </div>
            <span class="omit">金玲玉</span>
          </li>
          <li class="headPortrait">
            <div class="headIcon">
              <img src="../../../../../assets/images/indexImg/head_default.png" />
            </div>
            <span class="omit">金玲玉</span>
          </li>
          <li class="headPortrait">
          <div class="headIcon">
            <img src="../../../../../assets/images/indexImg/head_default.png" />
          </div>
          <span class="omit">金玲玉</span>
        </li>
          <li class="headPortrait">
            <div class="headIcon">
              <img src="../../../../../assets/images/indexImg/head_default.png" />
            </div>
            <span class="omit">金玲玉</span>
          </li>


        </ul>
      </div>



    </div>


  </div>




</template>


<script>
  var ezjsUtil = Vue.ezjsUtil;
  var apiConstants = ezjsUtil.constants.api;
  export default {
    data () {
      return {

      }
    },
    methods:{
      startLearning(){
        this.$router.push('/startLearning');
      },
    }
  }
</script>

<style lang="less">
  body{
    font-size:16px;
  }
  .course_content {
    height: calc(100% - 40px);
    .wrapper_containers_left {
      width: 70%;
      height: calc(100% - 20px);
      border: 1px solid #bbb;
      border-radius: 10px;
      background-color: #fff;
      margin: 0 2%;
      float: left;
      padding-top: 10px;
      .courseDetails_content_title{
        color: #333;
        font-size: 18px;
        border-left: 8px solid #FF481D;
        padding: 10px;
        text-align: center;
        .trainningContent {
          padding-top: 20px;
          padding-left: 20px;
          overflow: hidden;
          .trainning_info {
            float: left;
            margin: 0 62px;
            .time_to {
              margin: 0 10px;
            }
          }
        }
      }
      .progessOfTheCircle{
        width:90%;
        .announcement_title{
          position: relative;
          .announcement{
            position: absolute;
            right: 15px;
          }
          .courseDetails_message{
            width:100%;
          }
        }
        .learntingTaskNum_title{
          position: relative;
          .learntingTaskNum{
            position: absolute;
            right: 15px;
          }
          .courseDetails_book{
            width:100%;
          }
          .remainingNumber_learning{
            position: absolute;
            left: 110px;
            top: 57px;
            color: #f23000;
          }
        }
        .testTaskNum_title{
          position: relative;
          .testTaskNum{
            position: absolute;
            right: 15px;
          }
          .courseDetails_test{
            width:100%;
          }
          .remainingNumber_testTaskNum{
            position: absolute;
            left: 110px;
            top: 57px;
            color: #f23000;
          }
        }
        .certificateNum_title{
          position: relative;
          .certificateNum{
            position: absolute;
            right: 15px;
          }
          .courseDetails_exam{
            width:100%;
          }
          .remainingNumber_certificateNum{
            position: absolute;
            left: 110px;
            top: 57px;
            color: #f23000;
          }
        }

        .certificateNum{
          position: relative;
          .ivu-chart-circle{
            width:100%;
            position: absolute;
            top:0;
          }
          .courseDetails_learningProcess{
            position: absolute;
            bottom:0;
          }
        }
      }

    }
    .wrapper_containers_right{
      width: 24%;
      height: calc(100% - 20px);
      border: 1px solid #bbb;
      border-radius: 10px;
      background-color: #fff;
      float: left;
      .classmateBox{
        height: 26px;
        line-height: 26px;
        background: url(../../../../../assets/images/indexImg/classmateRectangular.png) no-repeat;
        color: #333;
        padding-left: 6%;
        margin: -1px -1px;
      }
      .headPortraitBox{
        height: calc(100% - 27px);
        padding-top: 23px;
        padding-left: 19px;
        overflow-y: auto;
        overflow-x: hidden;
      }
        .courseDetails_line1{
          width:100%;
          border-bottom:1px solid #eee;
        }
        .headPortrait {
          float: left;
          margin-right: 20px;
          margin-bottom: 10px;
          .headIcon{
            border: 1px solid #bbb;
            width: 87px;
            height: 87px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            img{
              display: inline-block;
              text-align: center;
              width:100%;
            }
          }
          .omit {
            display: inline-block;
            width: 87px;
            height: 37px;
            text-align: center;
            line-height: 37px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
      }
    }
  }


</style>
